@import 'mo/style/common';

#{$tabs} {
    background-color: var(--editorGroupHeader-tabsBackground);
    height: 100%;
    position: relative;
    user-select: none;

    &--line {
        border-bottom: 1px solid var(--tab-border);
    }

    &__header {
        align-items: center;
        display: flex;
        flex-flow: row nowrap;
        height: 35px;
        justify-content: flex-start;
    }

    &__content {
        font-size: 13px;
        height: calc(100% - 36px);
        width: 100%;

        &__item {
            display: none;
            height: 100%;

            &--active {
                display: block;
            }
        }
    }
}

#{$tab} {
    &__item {
        align-items: center;
        background: var(--tab-inactiveBackground);
        border-right: 1px solid var(--tab-border);
        box-sizing: border-box;
        color: var(--tab-inactiveForeground);
        cursor: pointer;
        display: flex;
        flex-wrap: nowrap;
        height: 100%;
        min-width: fit-content;
        padding-left: 10px;
        position: relative;
        user-select: none;

        &__label {
            font-size: 0;

            &:not(&:empty) {
                padding-right: 6px;
            }
        }

        &__extra {
            font-size: 0;
            padding: 0 4px;

            .codicon-close {
                opacity: 0;
            }
        }

        &:hover .codicon-close,
        &--active .codicon-close {
            opacity: 1;
        }

        &--active {
            background: var(--tab-activeBackground);
            border-bottom-color: var(--tab-activeBorder);
            color: var(--tab-activeForeground);
        }

        &--close {
            color: var(--tab-activeForeground);
        }
    }
}
